<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>动态</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.book-container {
				padding: 5px 15px;
				height: 50px;
			}
			
			.mui-table-view li {
				padding: 10px 0px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">上传乐谱</h1>
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" style="color: white;">上传</button>
		</header>
		<div class="mui-content">

			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="flex book-container">
						<div class="fill-h flex v-center">乐谱名称</div>
						<div class="flex-1"><input type="text" placeholder="请输入书籍名称" class="fill-w"></div>
					</div>
				</li>
				
				<li class="mui-table-view-cell">
					<div class="flex book-container">
						<div class="fill-h flex v-center">乐谱简介</div>
						<div class="flex-1"><input type="text" placeholder="请输入书籍简介" class="fill-w"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
							<a href="#sheet" style="padding-left: 15px;">
					<div class="flex book-container">
								<div class="fill-h flex v-center">添加乐谱</div>
								
						</div>
						</a>

				</li>
				<li class="mui-table-view-cell">
					<div class="flex v-center book-container">
							<div class="flex-1 fill-h flex v-center">
								<img src="../img/bg-01.png" class="fill-h" />
							</div>
							<span style="color: red;">删除</span>
						</div>

				</li>
			</ul>
			
		</div>

		<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li onclick="cancle(1)" class="mui-table-view-cell">
		        <a href="#">菜单1</a>
		      </li>
		      <li onclick="cancle(2)" class="mui-table-view-cell">
		        <a href="#">菜单2</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li onclick="cancle(3)" class="mui-table-view-cell">
		        <a href="#sheet1"><b>取消</b></a>
		      </li>
		    </ul>
		</div>
		

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script>
			function cancle(num){
				mui('#sheet').popover("hide");
			}
		</script>
	</body>

</html>